<template>
  <div class="flex flex-wrap"  @click="$router.push('/patient')">
    <div class="card flex flex-column" v-for="item in 20" :key="item">
      <div class="flex-1" style="color: #666">
        <div class="font-18 pb-1" style="color: #4a4a4a">1床</div>
        <div class="font-14 pb-1">系统科室</div>
        <div class="font-14 pb-1">
          <el-link type="primary" :underline="false">智云</el-link> 男 42岁
        </div>
        <div class="font-14">住院天数</div>
      </div>
      <div class="flex flex-between">
        <el-button size="small">医嘱记录</el-button>
        <el-dropdown>
          <el-button size="small">
            更多操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>全部资料</el-dropdown-item>
            <el-dropdown-item>打印条码</el-dropdown-item>
            <el-dropdown-item>换床</el-dropdown-item>
            <el-dropdown-item>办理出院</el-dropdown-item>
            <el-dropdown-item>诊疗建议</el-dropdown-item>
            <el-dropdown-item>治疗方案</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
};
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.card {
  cursor: pointer;
  border: 1px solid #e6e6e6;
  box-shadow: 0 1px 3px 0 rgb(51 51 51 / 15%);
  border-radius: 8px;
  width: 232px;
  height: 239px;
  float: left;
  margin-right: 12px;
  margin-bottom: 12px;
  padding: 20px 15px 15px;
  position: relative;
}

.card:hover{
	border-color: $mainColor;
}
</style>